<template>
    <div class="lx-article-item">
        <div class="article-item-inner">
            <div class="article-item-left">
                <div class="article-title">
                    <NuxtLink :to="'/detail/' + article.articleId">{{ article.articleTitle }}</NuxtLink>
                    <!-- <a :href=" '/detail/' + article.articleId">{{ article.articleTitle }}</a> -->
                </div>
                <div class="article-info">
                    {{ article.articleDesc }}
                </div>
                <div class="article-desc">
                    <div class="article-desc-left">
                        <p class="article-author">{{ article.userName }}</p>
                        <p class="article-time">2023-03-13</p>
                        <p class="article-preview">12k</p>
                        <p class="article-like">101</p>
                    </div>
                    <div class="article-desc-right">
                        <p class="article-tag">
                            ChatGPT
                        </p>
                    </div>
                </div>
            </div>
            <div class="article-item-right">
                <!-- onerror="this.remove()" -->
                <!-- <NuxtImg class="article-cover"  
                :src="article.articleCover"
                loading="lazy"
                onerror="onerror=null;src='https://img-blog.csdnimg.cn/direct/f5483fd4460a46d98da338d32ca52393.png'"
                :alt="article.articleTitle"
                :title="article.articleTitle"
                data-error="https://img-blog.csdnimg.cn/direct/f5483fd4460a46d98da338d32ca52393.png"
                >
                </NuxtImg> -->
                <!-- onerror="onerror=null;src='/_nuxt/assets/images/default_cover.jpg'" -->
                <img
                v-if="article.articleCover && article.articleCover.length > 0"
                class="article-cover"
                loading="lazy"
                :alt="article.articleTitle"
                :title="article.articleTitle"
                onerror="onerror=null;src='/_nuxt/assets/images/default_cover.jpg'" 
                :src="article.articleCover"
                data-error="https://img-blog.csdnimg.cn/direct/f5483fd4460a46d98da338d32ca52393.png">
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import type { articleItem } from '@/types/article';
import { defineProps, } from 'vue'

useSeoMeta({
  title: '黄粱一梦的博客',
  ogTitle: '黄粱一梦的博客',
  description: '黄粱一梦的博客',
})


interface articleItem {
    articleContent:string,
    articleCover:string,
    articleId:number | string,
    articleTitle:string,
    cateIds:string[],
    cateNames:string[],
    cates:{cateId:number | string,cateName:string}[],
    likeCount:string,
    publicTime:string,
    publicUserId:string,
    repliesCount:string,
    tagIds:string[],
    tagNames:string[],
    tags:{tagId:number | string,tagName:string}[],
    userAvatar:string,
    userId:number,
    userIp:string,
    userName:string,
    userParty:string,
    viewsCount:string
}

const props = defineProps({
    article: {
        type: Object as () => articleItem,
        required: true
    }
})

let loadPayload = (e:any) => {
    console.log('e',e);
}



</script>

<style lang="scss" scoped>
.lx-article-item {
    width: 100%;
    overflow: hidden;
    transition: .3s all ease-in;
    border-bottom: 1px solid var(--lx-gray-1);
    &:first-child {
        border-top: 1px solid var(--lx-gray-1);
    }
    &:hover {
        background-color: var(--lx-gray-1);
    }
    .article-item-inner {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: calc(var(--lx-padding-5) / 2) var(--lx-padding-5);
        .article-item-left {
            flex: 1;
            width: 100%;
            overflow: hidden;
            .article-title {
                font-size: 16px;
                font-weight: bold;
                color: var(--lx-text-color-0);
                margin-bottom: 4px;
            }
            .article-info {
                width: 100%;
                line-height: 22px;
                font-size: 13px;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                color: var(--lx-font-3);
                font-weight: 400;
                margin-bottom: 4px;
            }
            .article-desc {
                font-size: 13px;
                display: flex;
                align-items: center;
                justify-content: space-between;
                color: var(--lx-font-3);
                .article-desc-left {
                    display: flex;
                    align-items: center;
                    .article-author,.article-time,.article-preview,.article-like {
                        position: relative;
                        line-height: 22px;
                        margin-right: calc(var(--lx-margin-5) / 2);
                    }
                    .article-author::after {
                        content: "";
                        position: absolute;
                        right: 0px;
                        top: 50%;
                        transform: translateY(-50%);
                        width: 1px;
                        height: 15px;
                        background-color: var(--lx-gray-1);
                    }
                    .article-author {
                        padding-right: calc(var(--lx-margin-5) / 2);
                    }
                }
                .article-desc-right {
                    display: flex;
                    align-items: center;
                }
            }
        }
        .article-item-right {
            margin-left: var(--lx-margin-5);
            .article-cover {
                width: 110px;
                height: 74px;
                object-fit: cover;
                border-radius: var(--radius-6);
            }
        }
    }
}
</style>